<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#aaa>span{
			display:inline-block;
			width:50px;height:30px;
			background-color:deeppink;
			margin:0 5px;
			border-radius:4px 4px 0px 0px;
		}
		
		#aaa>span:hover{
			background-color:greenyellow;
		}
		
		#aaa>#b1:hover~div{
			background:url('./images/1.jpg') no-repeat;
			background-size:500px 300px;
		}
		#aaa>#b2:hover~div{
			background:url('./images/2.jpg') no-repeat;
			background-size:500px 300px;
		}
		#aaa>#b3:hover~div{
			background:url('./images/3.jpg') no-repeat;
			background-size:500px 300px;
		}
		#aaa>#b4:hover~div{
			background:url('./images/4.jpg') no-repeat;
			background-size:500px 300px;
		}

		#aaa>div{
			width:500px;height:300px;
			border:1px solid red;
			background-size:500px 300px;
		}
	</style>
</head>
<body>
	<div id='aaa'>
		<span id='b1'>1</span><span id='b2'>2</span><span id='b3'>3</span><span id='b4'>4</span>
		<div></div>
	</div>
</body>
</html>